FC
FC(Formatting Contexts，格式化上下文)，他是W3C规范中的一个概念。简单来说，它是页面中的一块渲染区域，并且拥有自己的一套渲染规则，它决定了子元素如何定位，以及和其他元素的关系和相互作用，他并不会影响区域外的元素。
Box
简单来说，web页面是由一个个Box组合而成的，而display等属性决定了Box的类型。
- block-level Box
当元素的CSS属性display为block，list-item，table时，它是块级元素。块级元素视觉上呈现为块，竖直排列。每个块级元素至少生成一个块级盒参与BFC。
- inline-level Box
display为inline，inline-block，inline-table时，为行内级元素，行内级元素生成行内级盒，参与行内格式化上下文IFC。
- flex container
display为flex或inline-flex，称他为弹性容器，flex会导致一个元素生成一个块级（block-level）弹性容器框，inline-flex会导致元素生成一个行内级（inline-level）弹性容器框。
- gird container
当元素的display为gird、inline-gird时，称他为栅格容器。
块容器盒
只包含其他块级盒，或只包含行内盒的容器
块盒
同时是块容器盒的块级盒称为块盒
行盒
由行内格式化上下文IFC产生的盒，用于表示一行
BFC见上一篇
IFC 行内级格式化上下文
行内格式化上下文是一个网页渲染结果的一部分，其中各行内框一个接一个的排列：对于水平书写方式，从左到右排列；对于垂直书写模式，从顶部开始排列。
- 如何创建IFC
块级元素中仅包含内联级别元素，当IFC中有块级元素插入时，会产生两个匿名块将父元素分隔开，产生两个IFC。
- IFC布局规则
在一个IFC内，子元素是水平方向横向排列的，并且垂直方向起点为元素顶部
子元素只会计算横向样式空间（padding、border、margin）
垂直方向样式空间不会被计算，在垂直方向上，子元素以不同的形式来对齐（vertical-align：底部、顶部、基线对齐）
- IFC应用
元素水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
多行文本水平垂直居中：创建一个IFC，然后设置其vertical-align：middle，其他行内元素则可以在此父元素下垂直居中。